<template>
  <div>
    App
    <button @click="handleGet">GET</button>
    <button @click="handlePost">POST</button>
    <button @click="handlePut">PUT</button>
    <button @click="handleDelete">DELETE</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  methods: {
    async handleGet() {
      /*
        1. 什么是跨域？
          发送请求违背浏览器同源策略，就会产生跨域

        2. 什么是同源策略？
          比较 发送请求的浏览器地址 和 要请求的服务器地址
          要求：协议名、域名、端口号三者必须完全一致
          只要有一个不一样，就是违背浏览器同源策略

        3. 什么样的请求有跨域问题？
          只有浏览器ajax请求存在跨域问题。
            普通http请求没有（img\link\script...），服务器也没有

        4. 解决跨域
          - jsonp 利用script可以跨域特性跨域。问题：1. 只支持get 2. 使用起来比较麻烦
          - cors 响应头 
              access-control-allow-origin: http://localhost:3000
              access-control-allow-methods: GET, POST, PUT, DELETE
              access-control-allow-headers: token
              access-control-max-age: 3600 预检请求（options的请求）缓存时间
          - proxy 服务器代理模式
      */
      try {
        const result = await axios.get(
          // "http://localhost:8080/api/admin/product/baseTrademark/1/5"
          "/api/admin/product/baseTrademark/1/10000"
        );
        console.log(result.data);
      } catch (e) {
        console.log(e);
      }
    },
    async handlePost() {
      try {
        await axios.post("/api/admin/product/baseTrademark/save", {
          logoUrl:
            "http://39.98.123.211/group1/M00/03/D9/rBHu8mHmKC6AQ-j2AAAb72A3EO0942.jpg",
          tmName: "锤子",
        });
      } catch (e) {
        console.log(e);
      }
    },
    async handlePut() {
      try {
        await axios.put("/api/admin/product/baseTrademark/update", {
          id: "32164",
          logoUrl:
            "http://39.98.123.211/group1/M00/03/D9/rBHu8mHmKC6AQ-j2AAAb72A3EO0942.jpg",
          tmName: "锤子",
        });
      } catch (e) {
        console.log(e);
      }
    },
    async handleDelete() {
      try {
        await axios.delete("/api/admin/product/baseTrademark/remove/32165");
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style></style>
